<template>
  <div class="user">
    <div class="add-user-btn">
      <el-button type="primary" @click="dialogVisible = true">添加用户</el-button>
    </div>
    <div class="user-list">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="account" label="用户名" />
        <el-table-column prop="name" label="名称" />
        <el-table-column label="头像">
          <template slot-scope="scope">
            <img :src="scope.row.avatar" style="width: 100px" />
          </template>
        </el-table-column>
        <el-table-column label="权限">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.role === 1" type="success">管理员</el-tag>
            <el-tag v-else type="info">编辑</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="introduction" label="个人说明" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" @click="editUser(scope.row)" circle />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="添加用户" :visible.sync="dialogVisible" width="50%">
      <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm.username" />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="ruleForm.password" show-password />
          </el-form-item>
          <el-form-item label="确认密码" prop="entPassword">
            <el-input v-model="ruleForm.entPassword" show-password />
          </el-form-item>
          <el-form-item label="名称" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item label="头像" prop="avatar">
            <!-- <el-input v-model="ruleForm.avatar" /> -->
            <div class="avatar-uploader" @click="imagecropperShow = true">
              <img v-if="ruleForm.avatar" :src="ruleForm.avatar" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </div>
          </el-form-item>
          <el-form-item label="权限" prop="role">
            <el-radio v-model="ruleForm.role" label="1">管理员</el-radio>
            <el-radio v-model="ruleForm.role" label="2">编辑</el-radio>
          </el-form-item>
          <el-form-item label="个人说明" prop="introduction">
            <el-input v-model="ruleForm.introduction" type="textarea" :rows="4" placeholder="请输入内容" />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')">重 置</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
    <image-cropper
      v-show="imagecropperShow"
      :key="imagecropperKey"
      :width="300"
      :height="300"
      url="http://localhost:3001/adminapi/user/upload"
      lang-type="zh"
      @close="close"
      @crop-upload-success="cropSuccess"
    />
  </div>
</template>
<script>
import ImageCropper from '@/components/ImageCropper'
import { userAdd, getUserList } from '@/api/user'

export default {
  name: 'User',
  components: { ImageCropper },
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      dialogVisible: false,
      ruleForm: {
        username: '',
        password: '',
        entPassword: '',
        name: '',
        avatar: '',
        role: 0,
        introduction: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur' }
        ],
        entPassword: [
          { validator: validatePass2, required: true, trigger: 'blur' }
        ],
        avatar: [
          { required: true, message: '请上传头像', trigger: 'blur' }
        ],
        role: [
          { required: true, message: '请选择权限', trigger: 'blur' }
        ]
      },
      imagecropperShow: false,
      imagecropperKey: 0,
      image: null,
      // 用户列表
      tableData: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 获取用户列表
    async getList() {
      const { data } = await getUserList()
      console.log(data)
      this.tableData = data.list
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const file = this.image
          for (const i in this.ruleForm) {
            file.append(i, this.ruleForm[i])
          }
          console.log(file)
          userAdd(file).then(res => {
            console.log(res)
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '添加成功!'
              })
              this.getList()
              this.dialogVisible = false
              this.ruleForm = {
                username: '',
                password: '',
                entPassword: '',
                name: '',
                avatar: '',
                role: 0
              }
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    cropSuccess(resData, createImgUrl) {
      this.imagecropperShow = false
      this.imagecropperKey = this.imagecropperKey + 1
      this.image = resData
      this.ruleForm.avatar = createImgUrl
      console.log(resData)
    },
    close() {
      this.imagecropperShow = false
    },
    // 修改
    editUser(row) {
      // this.ruleForm = row
      // this.dialogVisible = true
    }
  }
}
</script>
<style lang="scss" scoped>
.user {
  padding: 20px;

  .avatar-uploader {
    width: 178px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;

    &:hover {
      border-color: #409EFF;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }

    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
  }
}
</style>
